import React, { Component } from 'react'
import { Select, Form, Card, Button, Row, Col, Table, Divider, Tag, Pagination, Popconfirm, message } from 'antd';
import BaseComponent from '@/components/BaseComponent';
import { connect } from 'dva';
import style from './index.css';
import AddButton from "./AddButton"
import EditButton from "./EditButton"
import PermissionsWidget from "@/components/PermissionsWidget"

@connect(({ user }) => ({
    // data: risk.riskData,
    currentUser: user.currentUser,
}))
export default class index extends BaseComponent {
    constructor(props) {
        super(props)
        this.state = {
            data: [],
            total: 0,
            current: 0,
        }
    }

    componentDidMount() {
        this.getDataByPage({})
    }

    //分页
    getDataByPage = (param) => {
        this.execHttp('administrativeOfficesManagement/queryDept', { user: this.props.currentUser.id, currentPage: 1, pageSize: 10, ...param }).then((resp) => {
            if (resp.success) {
                this.setState({
                    data: resp.data.list,
                    total: resp.data.pagination.total,
                    current: resp.data.pagination.current
                })
            }
        });
    }
    //分页切换
    onChangePagination = (pageNumber) => {
        this.getDataByPage({
            user: this.props.currentUser.id,
            currentPage: pageNumber,
            pageSize: 10,
        })
    }

    //删除
    deleteById = (id) => {
        this.execHttp('administrativeOfficesManagement/del',
            {
                id
            }).then(resp => {
                if (resp.success) {
                    message.success(resp.message);
                    this.getDataByPage({})
                }
            });
    }


    render() {
        const columns = [
            {
                title: '隶属机构',
                dataIndex: 'orgName',
                key: 'orgName',
            },
            {
                title: '科室名称',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '科室代码',
                dataIndex: 'code',
                key: 'code',
            },
            {
                title: '创建时间',
                key: 'createTime',
                dataIndex: 'createTime',

            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <div className={style.actionstyle}>
                        <EditButton record={record} getDataByPage={this.getDataByPage}></EditButton>
                        <PermissionsWidget tag={'administrativeOfficesManagement:dept-delete'}>
                            <Popconfirm
                                title="是否确认?"
                                onConfirm={() => { this.deleteById(record.id) }}
                                okText="是"
                                cancelText="否"
                            >
                                <Button type="primary" style={{ marginLeft: "10px" }} >删除</Button>
                            </Popconfirm>
                        </PermissionsWidget>

                    </div>
                ),
            },
        ];

        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };

        const { data, total, current } = this.state;

        return (
            <div>
                <Card size="small" style={{ width: "100%" }}>
                    {/* <Form {...formItemLayout} layout="horizontal">
                        <Row gutter={16}>
                            <Col span={6}>
                                <Form.Item label="省份">
                                    <Select
                                        showSearch
                                        style={{ width: 200 }}
                                        placeholder="请选择省份"
                                    >
                                        <Option value="jack">Jack</Option>
                                        <Option value="lucy">Lucy</Option>
                                        <Option value="tom">Tom</Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="城市">
                                    <Select
                                        showSearch
                                        style={{ width: 200 }}
                                        placeholder="请选择城市"
                                    >
                                        <Option value="jack">Jack</Option>
                                        <Option value="lucy">Lucy</Option>
                                        <Option value="tom">Tom</Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="区县">
                                    <Select
                                        showSearch
                                        style={{ width: 200 }}
                                        placeholder="请选择区县"
                                    >
                                        <Option value="jack">Jack</Option>
                                        <Option value="lucy">Lucy</Option>
                                        <Option value="tom">Tom</Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Button type="primary"  >
                                    查询
                                </Button>
                                <Button style={{ marginLeft: "10px" }}>重置</Button>
                            </Col>
                        </Row>
                    </Form> */}
                    <PermissionsWidget tag={'administrativeOfficesManagement:dept-add'}>
                        <AddButton getDataByPage={this.getDataByPage}></AddButton>
                    </PermissionsWidget>

                    <Table columns={columns} dataSource={data} rowKey='id' pagination={false} 
                        size="small"
                        style={{marginTop:'20px'}}/>
                    <div style={{ marginTop: "20px", display: "flex", flexDirection: "row-reverse", }}>
                        <Pagination
                            showSizeChanger={true}
                            showQuickJumper
                            onChange={this.onChangePagination}
                            defaultCurrent={1}
                            total={total}
                            showTotal={total => `总共 ${total} 条`}
                        />
                    </div>
                </Card>
            </div >

        )
    }
}
